<template>
  <v-card>
      <v-flex xs12 sm10>
        <v-tree url="/item/category/list"
                :isEdit="isEdit"
                :key = "updateKey"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleClick="handleClick"
        />
      </v-flex>
  </v-card>
</template>

<script>
  import {treeData} from "../../mockDB";

  export default {
    name: "category",
    data() {
      return {
        isEdit:true,
        treeData: treeData, //v-tree添加 :treeData="treeData"  属性,使用静态数据
        updateKey: false
      }
    },
    methods: {
      handleAdd(node) {
        console.log("add .... ");
        console.log(node);
        //添加ajax请求进行后台处理
        this.$http.post("/item/category/addCategory",{
            id : node.id,
            name : node.name,
            parentId : node.parentId,
            isParent : node.isParent,
            sort : node.sort
        }).then(resp=>{
            console.log(resp);
            // node.id = resp.data;
            // 赋值无效,因为数据不存在双向绑定,所以需要烤炉刷新数据的问题,重新请求渲染?
            this.updateKey = !this.updateKey;//通过修改key的值重新渲染组件
        });

      },
      handleEdit(id, name) {
        console.log("edit... id: " + id + ", name: " + name)
      },
      handleDelete(id) {
        console.log("delete ... " + id);
        this.$http.delete("/item/category/deleteCategoryById/"+id,{}).then(resp=>{
          console.log("删除成功");
        });
      },
      handleClick(node) {
        console.log(node)
      }
    }
  };
</script>

<style scoped>

</style>
